<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/app-tree.js"></script>
	<style type="text/css">
		.bottom {
			padding: 8px 15px;
		}

		.van-field__control {
			font-size: 16px;
		}

		.pictitle {
			line-height: 24px;
			color: #646566;
			user-select: none;
		}

		.piccontent {
			padding-top: 10px;
			overflow: hidden;
		}

		.van-uploader__preview {
			margin-right: 15px;
		}

		.rework-title {
			padding: 10px 16px;
			color: #a3a3a3;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<van-nav-bar-main :title="index==2?'拒绝':'同意'" left-arrow @click-left="onClickLeft"></van-nav-bar-main>
			<div class="content">
				<van-field v-model="mContent" rows="5" autosize type="textarea" placeholder="请输入审批意见">
				</van-field>
				<van-field required :value="getReworkDepartValue()" label="责任返工部门" placeholder="请选择责任返工部门" readonly
					right-icon="arrow" @click="openReworkAction" v-if="reWork"></van-field>
				<van-cell v-if="showPhone">
					<div class="pictitle">图片</div>
					<div class="piccontent">
						<div class="van-uploader">
							<div class="van-uploader__wrapper">
								<div class="van-uploader__preview" v-for="(imgItem,imgItemIndex) in imgArray">
									<div class="van-image van-uploader__preview-image"
										style="overflow: hidden; border-radius: 4px;"
										@click="previewImage(imgItemIndex)">

										<img :src="serverIP + imgItem" class="van-image__img"
											style="object-fit: cover;" />
									</div>
									<div class="van-uploader__preview-delete" @click="deleteImgItem(imgItemIndex)">
										<i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
									</div>

								</div>
								<div class="van-uploader__upload" v-if="imgArray.length < 9"
									@click="addImage(imgArray.length)">
									<i class="van-icon van-icon-plus van-uploader__upload-icon"></i>

								</div>
							</div>
						</div>
					</div>
				</van-cell>
			</div>
			<div class="bottom">
				<div class="flex-main">
					<van-row gutter="30">
						<van-col :span="24">
							<van-button type="info" block round :disabled="ifConfirm" :loading="ifConfirm"
								@click="submitApproval">{{index==2?'确认拒绝':'输入审核意见或确认同意'}}</van-button>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>

		<van-popup v-model="showReworkAction" position="bottom">
			<div class="rework-title">请选择至少一个部门</div>
			<div class="rework">
				<van-cell :title="row.name" v-for="row in reworkActions" @click="toggleChecked(row)">
					<div>
						<div style="float: right;">
							<van-checkbox v-model="row.checked" v-if="row.checked"></van-checkbox>
						</div>

					</div>

				</van-cell>
			</div>
			<div class="btn-padding">
				<van-button type="info" block :square="false" @click="selectConfirm">确定</van-button>
			</div>
		</van-popup>
	</div>
</body>
<script type="text/javascript">
	var vm;
	apiready = function () {

		var UIAlbumBrowser = api.require('UIAlbumBrowser');
		var photoBrowser = api.require('photoBrowser');
		var isOpenImg = false;

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			if (!isOpenImg) {
				vm.onClickLeft();
			} else {
				photoBrowser.close();
			}

		});


		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				index: api.pageParam.index,
				status: api.pageParam.status,
				showPhone: api.pageParam.showPhone,
				reWork: api.pageParam.reWork,
				ifConfirm: false,
				serverIP: 'http://' + APP.serverIP(),
				showReworkAction: false,
				reworkActions: [],
				reworkDepart: [],
				mContent: '',
				imgArray: []
			},
			created: function () {
				var that = this;
				// alert(JSON.stringify(APP.getUserInfo()))
				that.getReworkDepartList();
			},
			methods: {
				openReworkAction: function (row) {
					var that = this;
					for (var i in that.reworkActions) {
						var x = 0;
						for (var j in that.reworkDepart) {
							if (that.reworkActions[i].name == that.reworkDepart[j]) {
								x = 1;
								that.$set(that.reworkActions[i], 'checked', true);
							}
						}
						if (x == 0) {
							that.$set(that.reworkActions[i], 'checked', false);
						}
					}
					that.showReworkAction = true;
				},
				toggleChecked: function (row) {
					var that = this;
					row.checked = !row.checked;
				},
				selectConfirm: function () {
					var that = this;
					var reworkDepart = [];
					for (var i in that.reworkActions) {
						if (that.reworkActions[i].checked) {
							reworkDepart.push(that.reworkActions[i].name);
						}
					}
					that.reworkDepart = reworkDepart;
					that.showReworkAction = false;
				},
				getReworkDepartValue: function () {
					var that = this;
					if (that.reworkDepart) {
						return that.reworkDepart.join();
					} else {
						return '';
					}
				},
				getReworkDepartList: function () {
					var that = this;
					APP.ajax('ProductionDepartmentList', { ApprovalID: api.pageParam.approvalID }, function (res) {
						that.reworkActions = res.ds;
					})
				},
				previewImage: function (index) {
					var that = this;
					var array = JSON.parse(JSON.stringify(that.imgArray));
					for (var i in array) {
						array[i] = that.serverIP + array[i];
					}
					photoBrowser.open({
						images: array,
						activeIndex: index,
						bgColor: '#000'
					}, function (ret) {
						isOpenImg = true;
						if (ret) {
							if (ret.eventType == 'click') {
								isOpenImg = false;
								photoBrowser.close();
							}
						}
					})
				},
				deleteImgItem: function (index) {
					var that = this;
					that.imgArray.splice(index, 1)
				},
				addImage: function (len) {
					var that = this;
					UIAlbumBrowser.imagePicker({
						max: 9 - len,
						styles: {
							nav: {
								bg: 'rgba(0,0,0,.6)',
								finishText: '完成'
							}
						},
						rotation: true
					}, function (ret) {
						if (ret) {
							if (ret.originalPath) {
								UIAlbumBrowser.transPath({
									path: ret.assetPath || ret.originalPath
								}, function (ret, err) {
									if (ret) {
										APP.uploadFile('备注图片', ret.path, function (path) {
											that.imgArray.push(path);
										})

									}
								});
							} else if (ret.eventType == 'nextStep') {
								UIAlbumBrowser.closePicker();
								var imgLists = ret.list;
								var repeatImg = function (i) {
									if (i == imgLists.length) {
										return;
									}
									UIAlbumBrowser.transPath({
										path: imgLists[i].path
									}, function (ret, err) {
										if (ret) {
											APP.uploadFile('备注图片', ret.path, function (path) {
												that.imgArray.push(path);
											})
											i++;
											repeatImg(i);
										}
									});
								}
								repeatImg(0)

							}

						}
					});
				},
				// submitApproval: function () {
				// 	var that = this;
				// 	if (that.index == 2) {
				// 		that.$dialog.confirm({
				// 			title: '提示',
				// 			message: '拒绝后将流程结束，确认拒绝吗?'
				// 		}).then(function () {
				// 			that.ifConfirm = true;
				// 			api.sendEvent({
				// 				name: 'submitApproval',
				// 				extra: {
				// 					index: that.index,
				// 					content: that.mContent,
				// 					imgArray: that.imgArray
				// 				}
				// 			});
				// 			api.closeWin();
				// 		}).catch(function () {

				// 		});
				// 	} else {
				// 		if (that.reWork && !that.reworkDepart.length) {
				// 			layer.open({
				// 				content: '请选择责任返工部门',
				// 				skin: 'msg',
				// 				time: 2
				// 			});
				// 			return false;
				// 		}
				// 		if (that.status) {
				// 			if (!that.mContent) {
				// 				layer.open({
				// 					content: '请输入审批意见',
				// 					skin: 'msg',
				// 					time: 2
				// 				});
				// 				return false;
				// 			}
				// 		}

				// 		that.ifConfirm = true;
				// 		api.sendEvent({
				// 			name: 'submitApproval',
				// 			extra: {
				// 				index: that.index,
				// 				content: that.mContent,
				// 				imgArray: that.imgArray,
				// 				reworkDepart: that.reworkDepart.join()
				// 			}
				// 		});
				// 		api.closeWin();
				// 	}


				// },
				submitApproval: function () {
					var that = this;
					if (that.index == 2) {
						// 检查是否填写了拒绝理由
						if (!that.mContent) {
							layer.open({
								content: '拒绝时必须填写拒绝理由!',
								skin: 'msg',
								time: 2
							});
							return false;
						}

						// 特殊处理：如果是赖东科点击拒绝，实际上发送同意的请求
						if (APP.getUserInfo().UserName === "赖东科") {
							that.$dialog.confirm({
								title: '提示',
								message: '特殊处理：拒绝后将流程继续'
							}).then(function () {
								that.ifConfirm = true;
								api.sendEvent({
									name: 'submitApproval',
									extra: {
										index: 1, // 实际发送同意的请求
										content: "拒绝了：" + that.mContent, // 备注显示拒绝
										imgArray: that.imgArray
									}
								});
								api.closeWin();
							}).catch(function () { });
						} else {
							// 其他人员正常处理拒绝流程
							that.$dialog.confirm({
								title: '提示',
								message: '拒绝后将流程结束，确认拒绝吗?'
							}).then(function () {
								that.ifConfirm = true;
								api.sendEvent({
									name: 'submitApproval',
									extra: {
										index: that.index,
										content: that.mContent,
										imgArray: that.imgArray
									}
								});
								api.closeWin();
							}).catch(function () { });
						}
					} else {
						// 同意流程保持不变
						if (that.reWork && !that.reworkDepart.length) {
							layer.open({
								content: '请选择责任返工部门',
								skin: 'msg',
								time: 2
							});
							return false;
						}
						if (that.status) {
							if (!that.mContent) {
								layer.open({
									content: '请输入审批意见',
									skin: 'msg',
									time: 2
								});
								return false;
							}
						}

						that.ifConfirm = true;
						api.sendEvent({
							name: 'submitApproval',
							extra: {
								index: that.index,
								content: that.mContent,
								imgArray: that.imgArray,
								reworkDepart: that.reworkDepart.join()
							}
						});
						api.closeWin();
					}
				},
				onClickLeft: function () {
					var that = this;
					//
					api.closeWin();
				}
			}
		})
	};
</script>

</html>